<template>
  <div>
    <div class="registered">
        <h3 class="title">填写注册信息</h3>
        <div class="formData">
			<ul>
				<li>
					<img src="../assets/register1.png"/>
					<label for="">会员名称</label>
					<input type="text" v-model="userName">
				</li>
				<li>
					<img src="../assets/register2.png"/>
					<label for="">代表行业</label>
					<input type="text" v-model="industry">
				</li>
				<li>
					<img src="../assets/register3.png"/>
					<label for="">联系电话</label>
					<input type="text" v-model="phone">
				</li>
				<li style="border:none;height:auto;padding-top:15px;">
					<img src="../assets/register4.png"/>
					<label for="">签到照片</label>
					<div class="uploadImg">
						<div>
							<img src="../assets/uploadImg.png" style="display:block"/>
						</div>
						<span>只支持jpg格式</span>
					</div>
				</li>
			</ul>
        </div>

		<p class="prompt">*签到采用人脸识别签到，请上传正脸清晰照片</p>

		<div class="protocolAndbutton">
			<label for="label" @change="clickMe">
                <input type="checkbox" id="label" v-model="ckeckVal" >已阅读《用户隐私条例》并同意
			</label>
			
			<div class="registeredButton"  @click="submit_registere">
				<span>提交注册</span>
			</div>
		</div>

    </div>
  </div>
</template>

<script >
export default {    
  	name: 'Registered',
  	data () {
    	return {
      		ckeckVal:false,
			userName: '',
			industry: '',
			phone: '',
			photo: '',
    	}
  	},
	methods: {
		submit_registere () {
			if (this.ckeckVal) {
				this.$router.push({name: 'index'})
			} else {
				alert('请同意用户协议')
			}
		}
	}
}
</script>


<style scoped>
.registered {
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
    background: #fff;

}
.title {
	text-align: center;
	margin: 30px 0;
}
.formData {
    width: 80%;
    margin: auto;
	font-size: 14px;
}
.formData li {
	margin: 15px 0;
	height: 30px;
	border-bottom: 1px #eee solid;
	color: #616161;
}
.formData li input {
	height: 90%;
	border:none;
	margin-left: 10px;
}
.formData li > img {
	width: 18px;
	margin-right: 5px;
	vertical-align: text-top;
}
.protocol {
	text-align:center;
}
.prompt {
	text-align: center;
	font-size: 14px;
	color: red;
	margin-top: 15%;
}
.protocolAndbutton {
    position: fixed;
	left: 0;
	right: 0;
    bottom: 20px;
	margin: auto;
	text-align: center;
	font-size: 12px;
	letter-spacing: 1px;
	color: #616161;
}
.protocolAndbutton input{
	width: 25px;
	vertical-align: middle;
    margin-bottom: 3px;
}
.registeredButton {
    width: 85%;
    height: 35px;
	margin: 17px auto 0;
    background-color: #EEC26D;
    border-radius: 5px;
}
.registeredButton span {
	color: #fff;
	font-size: 16px;
	line-height: 33px;
}
.uploadImg {
	display:inline-block;
	vertical-align: top;
	margin-left: 20px;
	text-align: center;
}
.uploadImg > div{
	background:#ccc; 
	vertical-align: top;
}
.uploadImg  img{
	display: block;
}
.uploadImg span {
	color:#ccc;
	font-size:12px;
	margin-top:5px;
	display:inline-block
}

</style>

